<template>
  <!-- 商品其他设置组件 -->
  <div>
    <el-form :model="form" label-width="130px" :rules="rules" ref="form" style="margin-top: -12px;">
      <el-form-item label="其他设置" class="one-label">

        <template v-if="fromListPage == 30">

          <!-- 虚拟销量 -->
          <el-form-item label="虚拟销量：" label-width="170px">
            <el-input v-model="form.unrealSalesNum" 
              @keyup.native="form.unrealSalesNum = checkInputNumWithPoint(form.unrealSalesNum, 0)"
              class="width-200">
            </el-input>
            <span class="tips">当前实际销量{{ form.salesNum }}</span>
            <div class="tips">小程序上显示为虚拟+实际销量</div>
          </el-form-item>

          <!-- 虚拟上架人数 -->
          <el-form-item label="虚拟上架人数：" label-width="170px">
            <el-input v-model="form.virtualPutawayNum" 
              @keyup.native="form.virtualPutawayNum = checkInputNumWithPoint(form.virtualPutawayNum, 0)"
              class="width-200">
            </el-input>
            <span class="tips">当前实际上架人数{{ form.putawayNum }}</span>
            <div class="tips">小程序上显示为虚拟+实际上架人数，在主播小程序为网红在卖人数</div>
          </el-form-item>

          <!-- 样品限购数 -->
          <el-form-item label="样品限购数：" label-width="170px" v-if="enterpriseConfig.anchorSelectionAuthority == 1">
            <el-input v-model="form.specimenLimitNum" 
              @keyup.native="form.specimenLimitNum = checkInputNumWithPoint(form.specimenLimitNum, 0)" 
              class="long-input-2">
            </el-input>
            <div class="tips">在主播小程序上购买样品的数量，填空或填0则为不限数量</div>
          </el-form-item>

          <el-form-item label="限购：" label-width="170px" prop="isLimit">
            <el-checkbox v-model="form.isLimit">限制每人可购买数量</el-checkbox>
            <div v-show="form.isLimit">
              <div>
                <el-radio v-model="form.limitType" label="1" @change="doChangeLimitType">单笔限购</el-radio>
                <div style="background:#F2F2F6;width:600px" class="pad-10 mar-l-24">
                  <div>
                    <span>每笔订单限购</span>
                    <el-input type="text" 
                      class="width-100 mar-l-10 mar-r-10" 
                      v-model="form.singleLimitNum"
                      @keyup.native="form.singleLimitNum = checkInputNumWithPoint(form.singleLimitNum, 0)">
                    </el-input>
                    <span>件</span>
                  </div>
                  <span>在云店小程序限制顾客购买该商品的每笔订单数量，填空或填0则为不限数量</span>
                </div>
              </div>
              <div>
                <el-radio v-model="form.limitType" label="2" @change="doChangeLimitType">每人限购</el-radio>
                <div style="background:#F2F2F6;width:600px" class="pad-10 mar-l-24">
                  <div>
                    <el-select v-model="form.personLimitType" class="width-150 mar-l-10 mar-r-10" placeholder="请选择">
                      <el-option v-for="item in personLimitList" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                    <span>限购</span>
                    <el-input type="text" 
                      class="width-100 mar-l-10 mar-r-10" 
                      @keyup.native="form.personLimitNum = checkInputNumWithPoint(form.personLimitNum, 0)"
                       v-model="form.personLimitNum">
                    </el-input>
                    <span>件</span>
                    <el-tooltip class="item" effect="light" placement="right">
                      <div slot="content">
                        限购周期说明:<br />
                        终身限购时限为商品存在的整个时段;<br />
                        每年限购周期为每年第一天的00:00:00至每年最后一天的23:59:59<br />
                        每月限购周期为每月第一天的00:00:00至每月最后一天的23:59:59<br />
                        每周限购周期为周一00:00:00至周天23:59:59<br />
                        每天限购周期为当天00:00:00至当天23:59:59
                      </div>
                      <i class="el-icon-question"></i>
                    </el-tooltip>
                  </div>
                  <span>限购周期以自然周期计算,如每周从周一到周日计算,其他周期同理;变更限购周期后,系统将重新累计用户已购数</span>
                </div>
              </div>
            </div>
          </el-form-item>

        </template>

        <el-form-item label="商品重量：" label-width="170px">
          <el-input v-model="form.weight" 
            @keyup.native="form.weight = checkInputNumWithPoint(form.weight, 4)" 
            class="width-200 mar-r-10">
            <template slot="append">Kg</template>
          </el-input>
        </el-form-item>

        <el-form-item label="商品体积：" label-width="170px">
          <el-input v-model="form.size" 
            @keyup.native="form.size = checkInputNumWithPoint(form.size, 6)" 
            class="width-200 mar-r-10">
            <template slot="append">m³</template>
          </el-input>
        </el-form-item>

        <el-form-item label="商品产地：" label-width="170px">
          <el-select v-model="form.countryId" filterable clearable @change="doChangeCountry">
            <el-option v-for="item in countryData" 
              :key="item.countryId" 
              :label="item.countryName"
              :value="item.countryId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品地区：" label-width="170px">
          <el-input v-model="form.prov" class="width-300 mar-r-10" placeholder="请输入省份" maxlength="30" show-word-limit :disabled="idDisabledProvCity"/>
          <el-input v-model="form.city" class="width-300 mar-r-10" placeholder="请输入城市" maxlength="30" show-word-limit :disabled="idDisabledProvCity"/>
        </el-form-item>

      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { getCountryList } from '@/api/system/country'

  import goodsBus from '@/views/goods/edit/goods-bus'

  export default {
    mixins: [goodsBus],
    props: {
      // 跳转源 30：零售 31：批发
      fromListPage: {
        type: Number,
        default: 30
      },
      // 商品对象
      goodsObj: {
        type: Object
      }
    },
    data() {
      // 限购规则
      const isLimitRule = (rule, value, callback) => {
        if (this.publicPlatfromAuthority) {
          if (this.form.isLimit && this.form.limitType === '2') {
            return callback(new Error('勾选公域平台，限购类型不能选择每人限购'))
          }
        }
        return callback()
      }
      return {
        // 默认中国id
        defaultCountryId: '1447771317507129386',
        // 表单
        form: {
          unrealSalesNum: 0, // 虚拟销量
          salesNum: 0, // 实际销量
          virtualPutawayNum: 0, // 虚拟上架人数
          putawayNum: 0, // 实际上架人数
          specimenLimitNum: 0, // 样品限购数
          isLimit: false, // 是否限购
          singleLimitNum: 0, // 单笔限购数
          personLimitNum: 0, // 每人限购数
          limitType: '1', // 限购类型：1-单笔限购；2-每人限购；
          personLimitType: '5', // 每人限购类型：5-终身；1-每天；2-每周；3-每月；4-每年；
          weight: '', // 重量
          size: '', // 体积
          countryId: '', // 国家id
          countryName: '', // 国家名称
          prov: '', // 省份
          city: '' // 城市
        },
        // 表单规则
        rules: {
          isLimit: [
            { trigger: 'change', validator: isLimitRule }
          ]
        },
        // 企业配置
        enterpriseConfig: {
          anchorSelectionAuthority: 0 // 主播选品增值功能
        },
        // 限购类型
        personLimitList: [
          { value: '5', label: '终身' },
          { value: '1', label: '每天' },
          { value: '2', label: '每周' },
          { value: '3', label: '每月' },
          { value: '4', label: '每年' }
        ],
        // 国家列表
        countryData: [],
        // 是否禁用省区
        idDisabledProvCity: false,
        // 是否勾选公域平台
        publicPlatfromAuthority: false
      }
    },
    created() {
    },
    mounted() {
      const goodsBaseData = this.$store.state.goodsBaseData
      Object.assign(this.enterpriseConfig, goodsBaseData.enterpriseConfig)
      // 获取国家列表
      getCountryList().then(response => {
        if (response.isError) return
        this.countryData = response.data
      })
      this.initForm()

      // 监听事件
      const that = this
      that.bindPublicPlatfromAuthority(function(publicPlatfromAuthority) {
        that.publicPlatfromAuthority = publicPlatfromAuthority
        that.checkForm('isLimit')
      })
    },
    methods: {
      // 初始化表单
      initForm() {
        if (this.goodsObj.goodsId) {
          Object.assign(this.form, this.goodsObj)
          this.form.limitType = this.form.limitType.toString()
          this.form.personLimitType = this.form.personLimitType.toString()
          if (this.form.isGoodsLimit === 1) {
            this.form.isLimit = true
            if (this.form.limitType === '2') {
              this.form.personLimitNum = this.form.singleLimitNum
              this.form.singleLimitNum = 0
            }
          }
          this.doChangeCountry(this.form.countryId)
        } else {
          this.form.countryId = this.defaultCountryId
        }
      },
      // 限购类型选择事件
      doChangeLimitType(val) {
        this.checkForm('isLimit')
      },
      // 国家修改事件
      doChangeCountry(countryId) {
        if (countryId) {
          this.countryData.forEach((item) => {
            if (item.countryId === countryId) {
              this.form.countryName = item.countryName
              return
            }
          })
        }
        this.idDisabledProvCity = !this.form.countryId || this.form.countryId !== this.defaultCountryId
        if (this.idDisabledProvCity) {
          this.form.prov = ''
          this.form.city = ''
        }
      },
      // 表单校验 true：成功 false：失败
      checkForm(prop) {
        let ret = true
        let checkArrays = []
        if (prop) {
          checkArrays = Array.isArray(prop) ? prop : [prop]
        } else {
          this.$refs['form'].fields.forEach(field => {
            checkArrays.push(field.prop)
          })
        }
        this.$refs['form'].validateField(checkArrays, (errorMsg, result) => {
          if (errorMsg) {
            const propKeys = Object.keys(result)
            this.$refs['form'].fields.forEach(field => {
              const index = propKeys.indexOf(field.prop)
              if (index !== -1) {
                this.$emit('addVaildShow', field)
              }
            })
            ret = false
          }
        })
        return ret
      },
      // 提交表单
      submitForm() {
        let personLimitType
        let limitType
        let limitNum
        let isGoodsLimit = 0
        if (this.form.isLimit) {
          isGoodsLimit = 1
          limitType = this.form.limitType
          limitNum = this.form.singleLimitNum
          if (limitType === '2') {
            limitNum = this.form.personLimitNum
            personLimitType = this.form.personLimitType
          }
        }

        const submitForm = {
          unrealSalesNum: this.form.unrealSalesNum, // 虚拟销量
          virtualPutawayNum: this.form.virtualPutawayNum, // 虚拟上架人数
          specimenLimitNum: this.form.specimenLimitNum, // 样品限购数
          isGoodsLimit: isGoodsLimit, // 商品限购开关：0-取消限购；1-开启限购
          limitType: limitType, // 限购类型：1-单笔限购；2-每人限购
          singleLimitNum: limitNum, // 限购数
          personLimitType: personLimitType, // 每人限购类型：5-终身；1-每天；2-每周；3-每月；4-每年
          weight: this.form.weight,
          size: this.form.size,
          prov: this.form.prov.trim(),
          city: this.form.city.trim(),
          countryId: this.form.countryId,
          countryName: this.form.countryName
        }
        return submitForm
      }
    }
  }
</script>

<style lang="less" scoped>
  .self-center {
    align-items: center;
    .el-icon-edit:hover {
      cursor: pointer;
    }
    /deep/ .el-button {
      border: none;
      padding: 0;
    }
  }
  .long-input-2 {
    width: 55%;
  }
  .tips {
    color: gray;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }
</style>
